@use "../mixins/bem" as *;
@use "../mixins/function" as *;

@include b(home) {
  @include e(content) {
    margin: 3rem auto 0;
    max-width: getCssVar("home-max-width");
    gap: getCssVar("home-gap");

    @include e(content__post) {
      flex: 1;
      min-width: 400px;
    }

    @include e(content__info) {
      position: sticky;
      top: calc(var(--vp-nav-height) + 10px);
    }
  }

  @media (max-width: 1280px) {
    @include e(content) {
      padding: 0 20px;
    }
  }

  @media (max-width: 768px) {
    @include e(content) {
      flex-wrap: wrap;
      @include e(content__post) {
        width: 100%;
      }
      @include e(content__info) {
        width: 100%;
        flex: 1;
      }
    }
  }
}
